<template>
	<div>
		<el-dialog title="菜单权限" :visible.sync="dialogVisible" :close-on-click-modal="false" width="40%"
			:before-close="handleClose">
			<div class="jurisdiction_top">
				<p>登录名：{{dataForm.name}}</p>
				<p>用户名：{{dataForm.username}}</p>
			</div>
			<el-divider></el-divider>
			<div>
				<el-tree 
				:data="data" 
				show-checkbox 
				default-expand-all 
				node-key="id" 
				ref="tree" 
				highlight-current
				icon-class=""
				:props="defaultProps">
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<span>
							<i class="el-icon-folder" style="color: #ffa500;margin-right: 5px;"></i>{{ node.label }}
						</span>              
					 </span>
				</el-tree>
			</div>
			<el-divider></el-divider>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitFun">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: 'jurisdiction',
		data() {
			return {
				dialogVisible: false,
				loading: false,
				dataForm: {
					id: 0,
					name: 'admin',
					username: 'admin'
				},
				data: [{
					id: 1,
					label: '在线监控',
					children: [{
						id: 4,
						label: '实时数据',
						children: [{
							id: 9,
							label: '三级 1-1-1'
						}, {
							id: 10,
							label: '三级 1-1-2'
						}]
					},{
						id: 11,
						label: '视频监控'
					},{
						id: 12,
						label: '继电器控制'
					}]
				}, {
					id: 2,
					label: '数据中心',
					children: [{
						id: 5,
						label: '历史数据'
					}, {
				 	id: 6,
						label: '报警数据'
					}]
				}, {
					id: 3,
					label: '系统管理',
					children: [{
						id: 7,
				  label: '账号管理'
					}, {
						id: 8,
						label: '设备管理'
					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'label'
				}
			}
		},
		methods: {
			init(id) {
				this.dialogVisible = true;
				this.dataForm.id = id;
				this.$nextTick(() => {})
			},
			//树结构
			getCheckedNodes() {
				console.log(this.$refs.tree.getCheckedNodes());
			},
			getCheckedKeys() {
				console.log(this.$refs.tree.getCheckedKeys());
			},
			setCheckedNodes() {
				this.$refs.tree.setCheckedNodes([{
					id: 5,
					label: '二级 2-1'
				}, {
					id: 9,
					label: '三级 1-1-1'
				}]);
			},
			setCheckedKeys() {
				this.$refs.tree.setCheckedKeys([3]);
			},
			resetChecked() {
				this.$refs.tree.setCheckedKeys([]);
			},
			//关闭弹窗
			handleClose(done) {
				done();
			},
			//提交
			submitFun() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.dialogVisible = false;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jurisdiction_top {
		display: flex;
		flex-wrap: wrap;

		p {
			font-size: 16px;
		}

		p:first-child {
			margin-right: 20px;
		}
	}

	.el-dialog__wrapper{
		::v-deep.el-dialog__body {
			// padding-top: 0px;
		}
		::v-deep.el-dialog__header{
			border-bottom: 1px solid #dddddd;
			background: #f8f8f8;
		}
	} 
</style>
